<script lang="ts" setup>
import { TgshListQueryResult } from '@/api/gdgl-dto'
import { ref, watch } from 'vue'
import { useMainStore } from '@/store/main'
import { ElMessage, ElTree } from 'element-plus'
import TreeUtilDTO from '@/utils/tree'
import gdglService from '@/api/gdgl'
import dlglService from '@/api/dlgl'
interface Tree {
  [key: string]: any
}
// 入参
const emit = defineEmits(['refresh'])
const store = useMainStore()
// 生命周期

/*
 * 打开弹框
 */
//
const loading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const multipleSelection = ref<TgshListQueryResult[]>([])
const openDialog = async (arr: TgshListQueryResult[]) => {
  currrentNode.value = null
  multipleSelection.value = arr
  getJsryxx()
  // getShryList(res)
  dialogVisible.value = true
}

/**
 * 树过滤
 */
const filterText = ref<string>('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const defaultProps = {
  children: 'children',
  label: 'jdmc',
}
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
// 树更新方法
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data[defaultProps.label].includes(value)
}
// 树数据
const treeData = ref<any>()

/**
 * 树点击
 */
const currrentNode = ref<Tree | null>()
const handleNodeClick = (data: Tree) => {
  // 点击节点是人员时
  currrentNode.value = data
}
/**
 * 提交（审核通过）
 */
const submit = () => {
  if (!currrentNode.value?.rybm || currrentNode.value.cj !== '3') {
    ElMessage.warning('请选择具体的人员')
    return
  }

  const params = {
    gdxxList: multipleSelection.value.map((el) => {
      return {
        ajbh: el.ajbh,
        bmsah: el.bmsah,
        tgjlbh: el.tgjlbh,
      }
    }),
    shjg: '1',
    shthyy: '',
    shthyydm: '',
    shthyymc: '',
    xyjdclrbh: currrentNode.value?.rybm || '',
    xyjdclrxm: currrentNode.value?.mc || '',
    sftjsh: 'N',
  }
  loading.value = true
  gdglService
    .saveTgshjl(params)
    .then(() => {
      ElMessage.success('审批成功')
      emit('refresh')
      dialogVisible.value = false
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

const getJsryxx = () => {
  let jslx = '1'
  if (
    multipleSelection.value[0].tgjddm === 'gd0150001' ||
    multipleSelection.value[0].tgjddm === 'gd0150002' ||
    multipleSelection.value[0].tgjddm === 'gd0150003' ||
    multipleSelection.value[0].tgjddm === 'gd0160002'
  ) {
    jslx = '1'
  } else if (
    multipleSelection.value[0].tgjddm === 'gd0150005' ||
    multipleSelection.value[0].tgjddm === 'gd0160003' ||
    multipleSelection.value[0].tgjddm === 'gd0150006' ||
    multipleSelection.value[0].tgjddm === 'gd0160001'
  ) {
    jslx = '2'
  } else if (
    multipleSelection.value[0].tglxmc === '补充材料' ||
    multipleSelection.value[0].tgjddm === 'gd0150007' ||
    multipleSelection.value[0].tgjddm === 'gd0150008'
  ) {
    jslx = '3'
  }
  // 查询数据
  const params = {
    jslx: jslx,
    dwbm: store.$state.userInfo?.dwbm as string,
    cbbmbm: '',
  }
  dlglService
    .queryJsryxx(params)
    .then((res) => {
      treeData.value = TreeUtilDTO.getTreeData(res.data, 'jdbm', 'fjdbm')
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

defineExpose({ openDialog })
</script>
<template>
  <el-dialog v-model="dialogVisible" title="审批通过" width="600px" :close-on-click-modal="false">
    <div class="dialog-box">
      <span class="title-text">请选择下一环节审批人：</span>
      <div class="tree-box">
        <el-input v-model="filterText" placeholder="请输入关键字" maxlength="50" clearable />

        <el-tree
          ref="treeRef"
          style="max-width: 600px"
          class="filter-tree"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          node-key="jdbm"
          highlight-current
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
  .title-text {
    font-weight: bold;
  }
  .tree-box {
    width: 100%;
    height: 350px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    .el-tree {
      flex: 1;
      margin-top: 10px;
      flex-shrink: 0;
      overflow: auto;
    }
  }
}
</style>
